<template>
  <div class="watermark-pic">
    <div class="watermark-pic-config">
      <el-upload class="upload-demo"
                 action=""
                 :auto-upload="false"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 :on-change="handleChange"
                 :limit="1"
                 :on-exceed="handleExceed">
        <el-button size="small"
                   type="primary">点击上传</el-button>
      </el-upload>
      <el-form label-width="80px"
               :model="picConfig">
        <el-form-item label="水印文字">
          <el-input size="small"
                    v-model="picConfig.waterTxt"></el-input>
        </el-form-item>
        <el-form-item label="字体大小"
                      :min="0"
                      :step="0.5"
                      :max="50">
          <el-slider v-model="picConfig.fontSize"></el-slider>
        </el-form-item>
        <el-form-item label="文本间距">
          <el-slider v-model="picConfig.width"
                     :min="0"
                     :max="100"></el-slider>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="picConfig.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="透明度">
          <el-slider v-model="picConfig.alpha"
                     :min="0"
                     :max="100"></el-slider>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-slider v-model="picConfig.rotate"
                     :min="0"
                     :max="360"></el-slider>
        </el-form-item>
      </el-form>
    </div>
    <div class="watermark-pic-down">
      <!-- <el-button @click="handleDown"
                 class="download-btn"
                 type="primary"
                 plain
                 icon="el-icon-download">下载水印图片</el-button> -->
      <div class="preview"
           ref="previewImg">
        <img :src="preImg || defaultImg"
             alt="" />
        <div class="watermark"
             :style="{ background: paint }"></div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'watermarkPicture'
})
export default class extends Vue {
  private defaultImg = ''
  private preImg = ''
  // 水印参数
  private picConfig: any = {
    waterTxt: '',
    fontSize: 10,
    width: 10,
    color: '#D61919',
    alpha: 35,
    rotate: 35
  }

  handleRemove (file: any, fileList: any) {
    console.log(file, fileList)
  }

  handlePreview (file: any) {
    console.log(file)
  }

  handleExceed (files: any, fileList: any) {}
  beforeRemove (file: any, fileList: any) {}
  handleChange (file: any, fileList: any) {
    console.log(file)
    const fileobj = file.raw
    const filename = file.name
    if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(filename)) {
      this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
      return false
    }
    const reader = new FileReader()
    reader.onload = (e: any) => {
      let data
      if (typeof e.target.result === 'object') {
        // 把Array Buffer转化为blob 如果是base64不需要
        data = window.URL.createObjectURL(new Blob([e.target.result]))
      } else {
        data = e.target.result
      }
      this.preImg = data
    }
    // 文件对象转为base64
    reader.readAsDataURL(fileobj)
    // 文件对象转为blob
    // reader.readAsArrayBuffer(fileobj)
  }

  get paint () {
    const wordWid =
      this.picConfig.fontSize * this.picConfig.waterTxt.split('').length
    const wid = wordWid + this.picConfig.width
    const svgTxt = `<svg xmlns="http://www.w3.org/2000/svg" width="${wid}px" height="${wid}px">
    <text x="50%" y="50%"
        alignment-baseline="middle"
        text-anchor="middle"
        stroke="${this.picConfig.color}"
        opacity="${this.picConfig.alpha / 100}"
        transform="translate(${wid / 2}, ${wid / 2}) rotate(${
      this.picConfig.rotate
    }) translate(-${wid / 2}, -${wid / 2})"
        font-weight="100"
        font-size="${this.picConfig.fontSize}"
        font-family="microsoft yahe"
        >
        ${this.picConfig.waterTxt}
    </text>
   </svg>`
    return `url(data:image/svg+xml;base64,${btoa(
      unescape(encodeURIComponent(svgTxt))
    )})`
  }
}
</script>

<style lang="scss" scoped>
.watermark-pic {
  display: flex;
  .upload-demo {
    margin-bottom: 20px;
  }
  .watermark-pic-down {
    margin-left: 60px;
  }
  .preview {
    margin: 30px 0;
    position: relative;
    width: 500px;
    height: 500px;
  }
  .preview img {
    width: 500px;
    height: 500px;
    object-fit: contain;
    overflow: hidden;
  }
  .watermark {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 500px;
    height: 500px;
  }
}
</style>
